<template>
    <div>
        <h3 class="pagetitle">全局设置</h3>
        <div class="editgroup">
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>屏幕分辨率</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <select class="inputStyle" v-model="backageData.sizeId" @change="setCanvasSize($event)">
                        <option :value="item.id" v-for="item in viewpowerArr" :key="item.id">{{ item.name }}</option>
                    </select>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle" v-if="backageData.sizeId == 9">
                <el-col :span="8" class="editlabel" />
                <el-col :span="16" class="editcontent dobuleinput">
                    <input type="number" v-model="backageData.width" />
                    <span>x</span>
                    <input type="number" v-model="backageData.height" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>配色</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <select class="inputStyle" :value="backageData.templateClass" @change="setCanvasKisn">
                        <option :value="item.className" v-for="item in ksinTemplate" :key="item.className">{{ item.title
                        }}</option>
                    </select>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>背景</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <!-- <ColorInput style="width:100%" v-model="backageData.backgroundColor"></ColorInput> -->
                    <!-- <input type="color" class="inputStyle" v-model="backageData.backgroundColor" /> -->
                    <el-color-picker class="inputcolor" v-model="backageData.backgroundColor" size="small" show-alpha
                        :predefine="predefineColors" popper-class="mycolorview"
                        @active-change="setColorChange(backageData, 'backgroundColor', $event)" />
                    <img-store v-model="backageData.backgroundImage" style="display:inline-block;">
                        <el-button size="mini" slot="button">请选择背景图片</el-button>
                    </img-store>
                    <!-- <el-tooltip class="uploadview" effect="dark" content="上传素材" placement="top-start">
                        <el-upload action="" :http-request="uploadToCos" :show-file-list="false"
                            accept=".jpg, .png, .gif">
                            <div class="uploadBtn">
                                <i class="el-icon-upload"></i>
                            </div>
                        </el-upload>
                    </el-tooltip>
                    <select style="width:154px;" v-model="backageData.backgroundImage">
                        <option value>请选择背景图片</option>
                        <option v-for="(item, index) in backgroundImgArr" :key="index" :value="item.url">{{ item.name }}
                        </option>
                    </select> -->
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="2" class="editlabel">
                </el-col>
                <el-col :span="22" class="editcontent">
                    <el-checkbox v-model="backageData.isSerializeBg">背景图片全局设置</el-checkbox>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" v-if="backageData.isSerializeBg">
                <el-col :span="4" class="editlabel">
                    <span></span>
                </el-col>
                <el-col :span="20" class="editcontent">
                    <el-color-picker class="inputcolor" v-model="backageData.replaceBackgroundColor" size="small" show-alpha
                        :predefine="predefineColors" popper-class="mycolorview"
                        @active-change="setColorChange(backageData, 'replaceBackgroundColor', $event)" />
                    <!-- <el-tooltip class="uploadview" effect="dark" content="上传素材" placement="top-start">
                        <el-upload action="" :http-request="uploadToCos" :show-file-list="false"
                            accept=".jpg, .png, .gif">
                            <div class="uploadBtn">
                                <i class="el-icon-upload"></i>
                            </div>
                        </el-upload>
                    </el-tooltip>
                    <select style="width:140px;" v-model="backageData.replaceBackgroundImage">
                        <option value>请选择背景图片</option>
                        <option v-for="(item, index) in backgroundImgArr" :key="index" :value="item.url">{{ item.name }}
                        </option>
                    </select> -->
                    <img-store v-model="backageData.replaceBackgroundImage" style="display:inline-block;">
                        <el-button size="mini" slot="button">请选择背景图片</el-button>
                    </img-store>
                    <el-button size="mini" @click="replaceBackground" style="margin-left:5px;">确认</el-button>
                    <!-- <button class="tjbutton" @click="replaceBackground">确认</button> -->
                </el-col>
            </el-row>
            <!-- <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">自定义网格</el-col>
                <el-col :span="16" class="editcontent dobuleinput">
                    <span>宽</span>
                    <span>
                        <input type="number" v-model="backageData.width" />
                    </span>
                    <span>高</span>
                    <span>
                        <input type="number" v-model="backageData.height" />
                    </span>
                </el-col>
            </el-row> -->
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">自定义网格</el-col>
                <el-col :span="16" class="editcontent dobuleinput">
                    <input type="number" v-model="backageData.gridRow" />
                    <span>行</span>
                    <input type="number" v-model="backageData.gridLine" />
                    <span>列</span>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">宫格间距</el-col>
                <el-col :span="16" class="editcontent">
                    <input type="number" style="width:70px;margin-right:10px;" v-model.number="backageData.lineWidth">
                    <el-checkbox v-model="backageData.isHideGridLine">隐藏网格线</el-checkbox>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>页面刷新频率</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model="backageData.reloadTime" type="number" class="miniinput" min="1" /><span>秒</span>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>视图缩放</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-slider v-model="backageData.editStepVal" :step=".01" :max="3" :min="1" />
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
// import { query, deleteInfo, create } from '@/api/resource'
// import { uploadObject } from "@/utils/upload"

// import ColorInput from "./colorInput.vue"
import ImgStore from "@/components/ImgStore"
export default {
    name: "SetingForm",
    props: {
        backageData: Object,
        setTemplate: Function,
        predefineColors: Array,
        replaceAllBackground: Function,
    },
    components: {
        ImgStore
    },
    model: {
        prop: 'backageData',
        event: 'change'
    },
    data() {
        return {
            viewpowerArr: [
                { id: 1, name: "常见电脑屏幕1920*1080", width: 1920, height: 1080 },
                { id: 2, name: "常见触控屏幕1280*800", width: 1280, height: 800 },
                { id: 3, name: "4K超高清屏3840*2160", width: 3840, height: 2160 },
                // { id: 4, name: "移动尺寸750", width: 750, height: 1300 },
                { id: 9, name: "自定义" },
            ],
            backgroundImgArr: [],
            // 上传相关
            uploadUrl: process.env.VUE_APP_UPLOAD_API,
            uploadDataform: {},
            //
            ksinTemplate: this.$store.getters.ksinTemplate,
            // ksinClassName: "",
        }
    },
    mounted() {
        // console.log(this.backageData.templateClass);
        // this.ksinClassName = this.backageData.templateClass;
        this.getImgList();
    },
    methods: {
        replaceBackground() {
            this.$emit('replaceAllBackground');
        },
        setColorChange(item, attr, val) {
            // console.log(val)
            item[attr] = val;
            // this.backageData.backgroundColor = "#ffffff";
            this.$emit("change", this.backageData);
            // this.$emit("change", this.backageData);
        },
        // 获取图片素材列表
        getImgList() {
            query({
                pageInfo: {
                    pageSize: 999,
                    page: 1,
                    totalCount: 0
                },
                orderBy: "createTime",
                orderAsc: false,
                name: "",
                typeInc: [0]
            }).then((response) => {
                if (response.data.code == 0) {
                    this.backgroundImgArr = response.data.data.data;
                }
            })
        },
        setCanvasSize(e) {
            var index = e.target.selectedIndex; // 选择项的index索引

            const data = this.viewpowerArr[index];
            if (data.id != 9) {
                this.backageData.width = data.width;
                this.backageData.height = data.height;

                this.$emit("change", this.backageData);
            }
        },
        // 重新设置模板
        setCanvasKisn(e) {
            var index = e.target.selectedIndex; // 选择项的index索引
            const data = this.ksinTemplate[index];

            this.$confirm('修改配色方案将会改变看板的整体颜色和所有组件的颜色, 确定要应用新的配色方案么？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.backageData.templateClass = data.className;
                this.$emit("change", this.backageData);
                this.$emit("setTemplate");
            }).catch(() => {
                // this.ksinClassName = this.backageData.templateClass;
            });
        },
        // 圖片上傳至素材  
        // uploadToCos(param) {
        //     uploadObject(param.file, (res) => {
        //         if (res.code == 0) {
        //             this.uploadDataform.id = "";
        //             this.uploadDataform.url = res.filePath;
        //             this.uploadDataform.name = res.fileName;
        //             this.uploadDataform.type = 0;

        //             this.createData();
        //         } else {
        //             this.$message.error(res.message);
        //         }
        //     })
        // },
        createData() {
            const tempDataForm = Object.assign({}, this.uploadDataform);
            create(tempDataForm)
                .then((res) => {
                    if (res.data.code == 0) {
                        this.$message({
                            message: "上传成功",
                            type: "success",
                        });

                        this.getImgList();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
                .catch(() => {
                });
        },
    }
};
</script>
